<template>
  <div class="contentShadow">
    <el-container>
      <el-header>
        <h1>论文成果</h1>
      </el-header>
      <el-main>
        <!-- 表格 -->
        <el-table :data="tableData">
          <el-table-column prop="number" label="序号" type="index" :index="indexMethod" align="center">
          </el-table-column>
          <el-table-column prop="studentId" label="学号" align="center">
          </el-table-column>
          <el-table-column prop="name" label="姓名" align="center">
          </el-table-column>
          <el-table-column prop="item" label="标题" align="center">
          </el-table-column>
          <el-table-column prop="id" label="操作" align="center">
            <template v-slot="scope">
              <el-button type="warning" @click="detail(scope.$index)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="block" style="margin-top:15px;display: flex; justify-content: center;">
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="conditions.currentPage"
                         :page-sizes="[1, 5, 10, 20, 50]"
                         :page-size="conditions.pageSize"
                         background
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="conditions.total">
          </el-pagination>
        </div>
        <!-- 检索和导出 -->
        <div>
          <div style="margin-top: 15px">
            <el-button type="primary" @click="dialogVisible1 = true">检索</el-button>
            <el-button type="success" @click="dialogVisible2 = true">导出</el-button>
          </div>
          <el-dialog
              title="检索"
              :visible.sync="dialogVisible1"
              width="30%"
              :close-on-click-modal="false"
          >
            <div>
              <el-form ref="form" :model="conditions" size="small">
                <el-form-item label="学号" prop="studentId">
                  <el-input v-model="conditions.studentId"></el-input>
                </el-form-item>
                <el-form-item label="级别" prop="grade">
                  <el-input v-model="conditions.grade"></el-input>
                </el-form-item>
                <el-form-item label="专业" prop="majorId">
                  <el-select v-model="conditions.majorId" placeholder="学苑">
                    <el-option v-for="item in majorList"
                               :key="item.majorId"
                               :label="`${item.majorName} (${item.majorCode})`"
                               :value="item.majorId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="学苑" prop="classId">
                  <el-select v-model="conditions.classId" placeholder="学苑">
                    <el-option v-for="item in classList"
                               :key="item.classId"
                               :label="item.className"
                               :value="item.classId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="导师" prop="mentorId">
                  <el-select v-model="conditions.mentorId" placeholder="导师">
                    <el-option v-for="item in mentorList"
                               :key="item.jobId"
                               :label="`${item.mentorName} (${item.jobId})`"
                               :value="item.mentorId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
             <el-button @click="resetForm('form')">重置</el-button>
             <el-button type="primary" @click="searchFor">查找</el-button>
            </span>
          </el-dialog>
          <el-dialog
              title="导出"
              :visible.sync="dialogVisible2"
              width="30%"
              :close-on-click-modal="false"
          >
            <div>
              <el-form ref="form" :model="conditions" size="small">
                <el-form-item label="学号" prop="studentId">
                  <el-input v-model="conditions.studentId"></el-input>
                </el-form-item>
                <el-form-item label="级别" prop="grade">
                  <el-input v-model="conditions.grade"></el-input>
                </el-form-item>
                <el-form-item label="专业" prop="majorId">
                  <el-select v-model="conditions.majorId" placeholder="学苑">
                    <el-option v-for="item in majorList"
                               :key="item.majorId"
                               :label="`${item.majorName} (${item.majorCode})`"
                               :value="item.majorId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="学苑" prop="classId">
                  <el-select v-model="conditions.classId" placeholder="学苑">
                    <el-option v-for="item in classList"
                               :key="item.classId"
                               :label="item.className"
                               :value="item.classId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="导师" prop="mentorId">
                  <el-select v-model="conditions.mentorId" placeholder="导师">
                    <el-option v-for="item in mentorList"
                               :key="item.jobId"
                               :label="`${item.mentorName} (${item.jobId})`"
                               :value="item.mentorId">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="文件名（例如123.xlsx，包含扩展名）" prop="fileName" :rules="{
                                required: true, message: '请填写文件名', trigger: 'blur'
                                }">
                  <el-input v-model="conditions.fileName"></el-input>
                </el-form-item>
              </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
             <el-button @click="resetForm('form')">重置</el-button>
             <el-button type="success" @click="exportAchievement">导出</el-button>
            </span>
          </el-dialog>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {countPaper, acquirePaper, gatherPaper} from "@/api/admin";
import {downloadRequest} from "@/api/download";
import {acquireClassInformation, acquireMajorInformation, acquireMentorInformation} from "@/api/basic";

export default {
  data() {
    return {
      tableData: [],
      dialogVisible1: false,
      dialogVisible2: false,
      conditions: {
        studentId: '',
        grade: '',
        majorId: '',
        classId: '',
        mentorId: '',
        fileName: '',
        total: 0, // 总条数
        pageSize: 5, // 每页的数据条数
        currentPage: 1 // 当前页码
      },
      majorList: [
        {majorId: 0, majorCode: '000000', majorName: '未指定'},
        {majorId: 1, majorCode: '080902', majorName: '软件工程'}
      ],
      classList: [
        {classId: 0, className: '未指定'},
        {classId: 1, className: '求知一苑'},
        {classId: 2, className: '求知二苑'}
      ],
      mentorList: [
        {mentorId: '', jobId: '', mentorName: ''}
      ],
    };
  },
  mounted() {
    countPaper(this.conditions).then(res1 => {
      this.conditions.total = res1.data
      acquirePaper(this.conditions).then(res2 => {
        this.tableData = res2.data
      })
    })
    acquireMajorInformation().then(res => {
      this.majorList = res.data
    })
    acquireClassInformation().then(res => {
      this.classList = res.data
      this.classList.sort((a, b) => a.classOrder - b.classOrder);
    })
    acquireMentorInformation().then(res => {
      this.mentorList = res.data
    })
  },
  methods: {
    // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.conditions.currentPage = 1;
      this.conditions.pageSize = val;
      countPaper(this.conditions).then(res1 => {
        this.conditions.total = res1.data
        acquirePaper(this.conditions).then(res2 => {
          this.tableData = res2.data
        })
      })
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.conditions.currentPage = val;
      countPaper(this.conditions).then(res1 => {
        this.conditions.total = res1.data
        acquirePaper(this.conditions).then(res2 => {
          this.tableData = res2.data
        })
      })
    },
    // 生成自增的序号
    indexMethod(index) {
      return index + 1 + (this.conditions.currentPage - 1) * this.conditions.pageSize;
    },
    // 点击详情跳转
    detail(index) {
      this.$router.push("/admin/paper-detail?id=" + this.tableData[index].id);
    },
    // 检索
    searchFor() {
      this.conditions.currentPage = 1
      countPaper(this.conditions).then(res1 => {
        this.conditions.total = res1.data
        acquirePaper(this.conditions).then(res2 => {
          this.tableData = res2.data
          this.dialogVisible1 = false
        })
      })
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 导出，注意一下任意文件下载漏洞和越权漏洞
    exportAchievement() {
      gatherPaper(this.conditions).then((res1) => {
        // console.log(res1.data)
        downloadRequest(this.conditions.fileName).then((res2) => {
          // 创建 a 标签进行下载
          const url = window.URL.createObjectURL(new Blob([res2]))
          const link = document.createElement('a')
          link.href = url
          link.setAttribute('download', this.conditions.fileName)
          document.body.appendChild(link)
          link.click()
        })
      })
    },
  },
}
</script>

<style>
@import '@/style/contentShadow.css';
</style>
